<template>
  <div>
    <a-form-model
      ref="form"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 6,offset: 0 }"
      :wrapper-col="{ span: 16,offset: 1}"
      layout="horizontal">
      <a-form-model-item label="节点ID" prop="id">
        <a-input v-model="formData.id" placeholder="请输入流程标识" :style="{width: '100%'}" allow-clear disabled="disabled"></a-input>
      </a-form-model-item>
      <a-form-model-item label="节点名称" prop="name">
        <a-input v-model="formData.name" placeholder="请输入流程名称" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="节点描述" prop="documentation" v-if="!filter('nodeDocumentation')">
        <a-textarea
          v-model="formData.documentation"
          placeholder="请输入流程描述"
          :auto-size="{minRows: 4, maxRows: 4}"
          :style="{width: '100%'}"
          allow-clear />
      </a-form-model-item>
      <a-form-model-item label="执行监听器" v-if="!filter('executionListener')">
        <a-badge :count="getExecutionListenerLength">
          <a-button @click="handleShowExecutionListener">编辑</a-button>
        </a-badge>
      </a-form-model-item>
      <a-form-model-item label="类型" v-if="!filter('executionListener')">
        <a-radio-group v-model="sequenceType" @change="onChangeType" button-style="solid" default-value="1">
          <a-radio-button value="1">
            正常
          </a-radio-button>
          <a-radio-button value="2">
            驳回
          </a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="跳转条件" prop="conditionExpression" v-show="!!showConfig.conditionExpression" v-if="!filter('conditionExpression')">
        <a-input v-model="formData.conditionExpression" placeholder="跳转条件表达式" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="跳过条件" prop="skipExpression" v-show="!!showConfig.skipExpression" v-if="!filter('skipExpression')">
        <a-input v-model="formData.skipExpression" placeholder="跳转条件表达式" allow-clear></a-input>
      </a-form-model-item>
    </a-form-model>
    <a-modal
      :visible="executionListenerVisible"
      title="执行监听器"
      width="800px"
      :maskClosable="false"
      :closable="false"
      @change="executionListenerVisible = $event">
      <template #footer>
        <a-button key="submit" type="primary" @click="handleExecutionListener">关闭</a-button>
      </template>
      <executionListener
        ref="executionListener"
        :element="element"
        :modeler="modeler"
      />
    </a-modal>
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
import executionListener from './property/executionListener'
export default {
  comments: {
    executionListener
  },
  mixins: [mixinPanel, mixinExecutionListener],
  data () {
    return {
      formData: {
        category: undefined,
        id: undefined,
        name: undefined,
        documentation: undefined,
        skipExpression: undefined,
        conditionExpression: undefined
      },
      sequenceType: undefined,
      rules: {
        category: [{
          required: true,
          message: '请选择流程分类',
          trigger: 'change'
        }],
        id: [{
          required: true,
          message: '请输入流程标识',
          trigger: 'blur'
        }],
        // name: [{
        //   required: true,
        //   message: '请输入流程名称',
        //   trigger: 'blur'
        // }],
        documentation: []
      }
    }
  },
  computed: {

  },
  watch: {
    'formData.conditionExpression': function (val) {
      if (val) {
        const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
        this.updateProperties({ conditionExpression: newCondition })
      } else {
        this.updateProperties({ conditionExpression: null })
      }
    },
    'formData.skipExpression': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:skipExpression': val })
    }
  },
  created () {
    let cache = commonParse(this.element)
    cache = conditionExpressionParse(cache)
    this.formData = cache
    if (this.formData.id.indexOf('Reject_') !== -1) {
      this.sequenceType = '2'
    } else {
      this.sequenceType = '1'
    }
    console.log(this.formData.id, this.sequenceType)
  },
  methods: {
    onChangeType (e) {
      const id = this.formData.id
      if (e.target.value === '2') {
        this.formData.id = 'Reject_' + id
        this.formData.name = '驳回'
      } else {
        this.formData.id = id.replace('Reject_', '')
        this.formData.name = ''
      }
    }
  }
}
</script>

<style></style>
